/**
  * @prop --vm-scrim-bg: The background color of the scrim.
  * @prop --vm-scrim-z-index: The position in the UI z-axis stack inside the player.
  */
:host {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--vm-scrim-z-index);
}

.scrim {
  position: absolute;
  width: 100%;
  background: var(--vm-scrim-bg);
  display: inline-block;
  opacity: 0;
  visibility: hidden;
  transition: var(--vm-fade-transition);
}

.scrim.gradient {
  height: 258px;
  background: none;
  background-position: bottom;
  background-image: url('');
}

.scrim.gradientUp {
  top: unset;
  bottom: 0;
}

.scrim.gradientDown {
  transform: rotate(180deg);
}

.scrim.hidden {
  display: none;
}

.scrim.active {
  opacity: 1;
  visibility: visible;
}
